<template>
  <view class="">
    <view class="feedback-box">
        <view class="fktitle" >联系反馈</view>
        <radio-group class="seleradio" @change="radioChange">
          <label class="radio"><radio value="客服" checked="true" />客服</label>
        	<label class="radio"><radio value="建议"  />建议</label>
        	<label class="radio"><radio value="故障" />故障</label>
          <label class="radio"><radio value="投诉" />投诉</label>
        </radio-group>
        <view class="fktitle2">反馈内容</view>  
          <view class="">
            <textarea class="fktxt" v-model="fktxt" placeholder="请填写您的反馈内容" name="" id="" cols="30" rows="10"></textarea>
          </view>
        <view class="fktitle2">联系方式</view>  
          <input v-model="relation" class="lxfs-input" maxlength="11" type="number" placeholder="请输入手机号码" />
        <button class="fkbtn" @click="feedback">立即提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fktxt:'',
        fktype:'客服',
        relation:''
      }
    },
    methods:{
      	radioChange(e) {
            this.fktype = e.detail.value
         	},
      feedback() {

        uni.request({
        	url: getApp().globalData.apiDomain+'/lymsg/addly',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
           data:{
             'content':this.fktxt,
             'type':this.fktype,
             'lxfs':this.relation
           },
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              uni.showToast({
                title: res['data']['msg'],
                icon: 'none',
                duration: 3500
              });
              this.fktxt = ''
              this.relation =''
        			return;
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      }
    }
  }
</script>

<style>
  .feedback-box {
    width: 92%;
    padding: 55rpx;
    height: 1000rpx;
    margin: 30rpx auto 0 auto;
    
    background-color: #fff;
    border-radius: 15rpx;
  }
  radio::before,
  checkbox::before {
    z-index: 0;
    
  }
  checkbox .wx-checkbox-input::before,
  radio .wx-radio-input::before {
    display: block;
    /* background-color: rgb(3,188,191); */
  }
radio .wx-radio-input.wx-radio-input-checked {
		background-color: #4193FE !important;
    border: 0;
		color: #ffffff !important;
	}
  radio {
    margin-right: 10rpx;
  }
.fktitle,.fktitle2 {
  font-size: 36rpx;
  color: #a3a3a3;
}
.fktitle2 {
  margin: 45rpx 0 30rpx 0;
}
.seleradio {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 25rpx;
}
.fktxt {
  width: 100%;
  height: 250rpx;
  padding: 25rpx;
  font-size: 32rpx;
  border-radius: 15rpx;
  background-color: rgb(246,246,246);
}
.lxfs-input {
  width: 100%;
  height: 90rpx;
  padding-left: 20rpx;
  font-size: 32rpx;
  border-radius: 15rpx;
  background-color: rgb(246,246,246);
}
.fkbtn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #4193FE;
  border-radius: 40rpx;
  border: 0;
  color: #fff;
  margin-top: 80rpx;
  
}
</style>